    import { getCategoryAPI } from '@/network/category';
    import {ref, onMounted} from 'vue'
    import { useRoute, onBeforeRouteUpdate } from 'vue-router';

export function useCategory() {
    let categoryData = ref({})
    
    
    const route = useRoute()
    
    const getCategory = async (id = route.params.id) => {
        const res = await getCategoryAPI(id)
        // console.log(res);
        categoryData.value = res.result
    }

    onMounted(() => {
        getCategory()
    })

    // 监听路由更新
    onBeforeRouteUpdate((to) => {
        // console.log('路有变化了');
        // 使用最新的路由参数id
        // console.log(to);
        getCategory(to.params.id)
    })
    
    // // 2. 自动监听变化的属性
    // watchEffect(() => getCategory())

    // // 监测响应式对象内的属性，是基本类型，要写成函数返回，是对象可直接写，但最好写函数返回
    // watch(() => {
    //     return route.params.id
    // }, () => {
    //     getCategory()
    // })

    return {categoryData}

}